<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 第一步设置手机号和密码 -->
		<view class="step1" v-if="step == 1">
			<u-icon name="arrow-left" size="22" color="#888888" @click="toBack" class="close"></u-icon>
			<view class="logo">
				<u--image src="/static/images/icon_step_3.png" width="100" height="100" mode="widthFix" :fade="false"
					:show-loading="false"></u--image>
			</view>
			<view class="login">
				<view class="input">
					<u-input v-model="form.mobile" type="number" border="none" placeholder="请输入手机号" maxlength="11"
						@input="changeInput" />
				</view>
				<view class="input">
					<u-input v-model="form.password" :password="showPassword" border="none" placeholder="请设置登录密码"
						@input="changeInput">
						<u-icon slot="suffix" :name="showPassword? 'eye' : 'eye-fill'" @click="changeShowPassword(1)"
							size="20"></u-icon>
					</u-input>
				</view>
				<view class="input">
					<u-input v-model="form.passwords" :password="showPasswords" border="none" placeholder="请再次输入登录密码"
						@input="changeInput">
						<u-icon slot="suffix" :name="showPasswords? 'eye' : 'eye-fill'" @click="changeShowPassword(2)"
							size="20"></u-icon>
					</u-input>
				</view>
			</view>
			<view class="agreement">
				<u-checkbox-group v-model="agreement" placement="column">
					<u-checkbox :name="1" shape="circle" activeColor="#DE2E2E"></u-checkbox>
				</u-checkbox-group>
				我已阅读并同意<text class="url" @click="onJump('/pages/article/details?id=1518144075075727362')">《用户服务协议》</text>及<text class="url" @click="onJump('/pages/article/details?id=1518144894902775809')">《隐私政策》</text>
			</view>
			<u-button text="下一步" type="error" shape="circle" :disabled="button" @click="sendCode"></u-button>
		</view>
		<!-- 第二步输入验证码 -->
		<view class="step2" v-show="step == 2">
			<u-icon name="close" color="#888888" size="22" class="close" @click="goStep"></u-icon>
			<view class="logo">
				<u--image src="/static/images/icon_step_2.png" width="100" height="100" mode="widthFix" :fade="false"
					:show-loading="false"></u--image>
			</view>
			<view class="title">请输入手机短信验证码</view>
			<view class="info">已发送至短信验证码至 {{ mobile }}</view>
			<view class="code">
				<u-code-input v-model="form.code" mode="line" :bold="true" borderColor="#DE2E2E" fontSize="22"
					:hairline="true" @finish="submit"></u-code-input>
			</view>
			<view class="codeBox">
				<u-code ref="uCode" @change="codeChange" start-text="获取验证码" changeText="X秒后,可重新获取验证码"
					endText="没收到？重新获取验证码" @start="disabled = true" @end="disabled = false"></u-code>
				<text @tap="getCode" :text="tips" :class="[disabled?'disabled':'normal']">{{tips}}</text>
			</view>
		</view>

		<!-- 注册协议窗口 -->
		<!-- <u-overlay :show="showAgreement">
			<view class="warp">
				<view class="box">
					<view class="title">注册协议及隐私政策</view>
					<scroll-view :scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="true" class="content">
						<u-parse :content="registProtocolInfo"></u-parse>
						<view class="button">
							<u-button text="不同意" shape="circle" class="cancel" @click="toBack"></u-button>
							<u-button text="同意并继续" shape="circle" class="confirm" @click="confirmAgreement"></u-button>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-overlay> -->
	</view>
</template>

<script>
	import {
		sendRegisterSMS,
		register,
		getMemberInfo
	} from '@/config/api';
	import {
		registProtocol
	} from '@/config/agreement.js';
	import {
		getUserInfo
	} from '@/config/h5Utils';
	export default {
		data() {
			return {
				step: 1,
				form: {
					mobile: "",
					password: "",
					passwords: ""
				},
				showPassword: true,
				showPasswords: true,
				agreement: [],
				button: true,
				mobile: "",
				showAgreement: false,
				scrollTop: 0,
				registProtocolInfo: "",
				memberSource: 6,
				seconds: 60, // 获取验证码倒计时
				tips: '', // 获取验证码文案
				disabled: true
			}
		},
		onLoad() {
			this.protocol();
			this.getMemberSource();
		},
		methods: {
			// 页面跳转
			onJump(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 返回
			toBack() {
				uni.navigateBack();
			},
			// 返回上一步
			goStep() {
				// #ifndef APP-PLUS
				uni.showModal({
					title: "操作提示",
					content: '点击返回将中断注册，确定返回？',
					confirmColor: "#0E9C98",
					cancelColor: "#999999",
					success: (res) => {
						if (res.confirm) {
							this.step = 1;
							this.$refs.uCode.reset();
						}
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.$showModal({
					title: "操作提示",
					confirmVal: '确定',
					cancelVal: '取消',
					content: '点击返回将中断注册，确定返回？',
				}).then(res => {
					this.step = 1;
					this.$refs.uCode.reset();
				});
				// #endif
			},
			// 表单输入内容
			changeInput(e) {
				if (this.form.mobile.length == 11 && this.form.password.length > 0 && this.form.passwords.length > 0) {
					this.button = false;
				} else {
					this.button = true;
				}
			},
			// 显示/隐藏密码
			changeShowPassword(type) {
				if (type == 1) {
					this.showPassword = !this.showPassword;
				} else {
					this.showPasswords = !this.showPasswords;
				}
			},
			// 获取注册协议
			protocol() {
				this.registProtocolInfo = registProtocol;
			},
			// 同意注册协议操作
			confirmAgreement() {
				this.agreement.push(1);
				this.showAgreement = false;
			},
			// 获取注册验证码
			sendCode() {
				const agreement = this.agreement;
				const mobile = this.form.mobile;
				const password = this.form.password;
				const passwords = this.form.passwords;
				if (!this.$u.test.mobile(mobile)) {
					uni.$u.toast('请正确输入手机号');
					return;
				}
				if (!this.$u.test.rangeLength(password, [8, 20])) {
					uni.$u.toast('设置密码需为8-20个字符');
					return;
				}
				if (password !== passwords) {
					uni.$u.toast('两次输入的密码不一致');
					return;
				}
				if (agreement.length == 0) {
					uni.$u.toast('请阅读并勾选页面协议');
					return;
				}
				this.getCode(1);
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode(step) {
				if (this.$refs.uCode.canGetCode) {
					const params = {
						phone: this.form.mobile
					}
					sendRegisterSMS(params).then((res) => {
						this.mobile = this.form.mobile.substr(0, 3) + "****" + this.form.mobile.substr(7);
						this.step = 2;
						if (step !== 1) {
							uni.$u.toast('验证码已发送');
						}
						this.$refs.uCode.start();
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 提交注册
			async submit(e) {
				let params = {
					telPhone: this.form.mobile,
					memberPwd: this.form.password,
					code: e,
					memberSource: this.memberSource
				}
				if (this.$store.state.distributionId) {
					httpData.distributionId = this.$store.state.distributionId;
				}
				// 注册操作
				try {
					const res = await register(params);
					// 存储token
					uni.setStorageSync('userToken', res);
					// 获取用户信息
					getUserInfo(() => {
						// 返回之前页面
						const url = uni.getStorageSync('loginGotoUrl');
						if (url == '/pages/index/index' || url == '/pages/goods/category' || url ==
							'/pages/cart/index' || url == '/pages/my/index') {
							uni.switchTab({
								url
							});
						} else {
							uni.redirectTo({
								url
							});
						}
						uni.removeStorageSync('loginGotoUrl');
					});
				} catch (res) {
					if (!res.success && res.code == 105) {
						setTimeout(() => {
							this.step = 1;
							this.$refs.uCode.reset();
						}, 1000);
					}
				}

			},
			// 得到来源
			getMemberSource() {
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform == "android") {
					this.memberSource = 1; //	安卓APP
				} else {
					this.memberSource = 2; //	苹果APP
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.memberSource = 3; //	微信小程序
				// #endif
				// #ifdef H5
				if (this.$isWeChat) {
					this.memberSource = 4; //	微信公众号
				} else {
					this.memberSource = 5; //	网页
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #fff;
		padding: 200rpx 50rpx 50rpx 50rpx;

		.step1 {
			.close {
				position: absolute;
				/* #ifned APP-PLUS */
				top: 30rpx;
				/* #end */
				/* #ifed APP-PLUS */
				top: 100rpx;
				/* #end */
				left: 50rpx;
			}

			.logo {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.login {
				margin-top: 10%;

				.input {
					border-radius: 100rpx;
					background-color: #F2F2F2;
					padding: 25rpx 50rpx;
					margin-top: 40rpx;

					&:first-child {
						margin-top: 0;
					}
				}
			}

			.agreement {
				font-size: 24rpx;
				margin: 5% 2%;
				color: #999999;
				display: flex;

				.url {
					color: $u-error;
				}
			}
		}

		.step2 {
			.close {
				position: absolute;
				top: 50rpx;
				left: 50rpx;
			}

			.logo {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.title {
				text-align: center;
				font-size: 30rpx;
				margin-top: 20rpx;
			}

			.info {
				text-align: center;
				margin: 20rpx 0 20rpx 0;
				color: #999999;
				font-size: 24rpx;
			}

			.code {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.codeBox {
				margin-top: 40rpx;
				text-align: center;

				.normal {
					color: $u-error;
				}

				.disabled {
					color: #F7C8C8;
				}
			}
		}

		// 注册协议
		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.box {
				width: 90%;
				height: 90%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx;
				font-size: 24rpx;

				.title {
					font-size: 34rpx;
					text-align: center;
				}

				.content {
					margin-top: 20rpx;
					height: 92%;
				}

				.button {
					margin-top: 40rpx;
					display: flex;

					.cancel {
						background-color: #cccccc;
						color: #FFFFFF;
						border: none;
						margin-right: 30rpx;
					}

					.confirm {
						background-color: $u-error;
						color: #FFFFFF;
						border: none;
					}
				}
			}
		}
	}
</style>
